import React, {
  Component,
  Fragment
} from 'react';
import {
  CSSTransition,
  TransitionGroup
} from 'react-transition-group';
import './style.css';


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: [],
      show: true
    }
    this.handleAddItem = this.handleAddItem.bind(this)
  }
  // unmountOnExit 消失之后，按钮的位置变动 onEntered是钩子
  render() {
    return (
      <Fragment>
      <TransitionGroup>
        {
          this.state.list.map((item, index) => {
            return (
              <CSSTransition
                timeout={1000}
                classNames='fade'
                unmountOnExit
                onEntered={(el) => {el.style.color='blue'}}
                appear={true}
                key={index}
              >
                <div>{item}</div>
              </CSSTransition>
            )
          })
        }
      </TransitionGroup>
        <button onClick={this.handleAddItem}>toggle</button>
      </Fragment>
    )
  }

  handleAddItem() {
    this.setState((prevState) => {
      return {
        list: [...this.state.list, 'item']
      }
    })
  }
}

export default App;

/*<Fragment>
  <CSSTransition 
    in={this.state.show}
    timeout={1000}
    classNames='fade'
    unmountOnExit
    onEntered={(el) => {el.style.color='blue'}}
    appear={true}
  >
    <div>hello</div>  
  </CSSTransition>
  <button onClick={this.handleToggle}>toggle</button>
</Fragment>

handleToggle() {
    this.setState({
      show: this.state.show ? false : true
    })
  }
*/